<template>
  <div class="dice">
    <!-- <div ref="dragDiv" :style="{ width: slewidths + 'px' }" class="sleader">
      <span
        ref="moveDiv"
        :style="{ width: widths + 'px' }"
        class="postwrp"
      ></span>
      <span class="moreb">{{ moreb }}</span>
    </div> -->
    <p>车辆报警器设置</p>
    <div class="div-btn">
      <slot  name="center"></slot>

      <el-button class="btn1" icon="el-icon-truck" size="small" type="danger" @click="evacuate"
        >撤离</el-button
      >
      <el-button class="btn2" icon="el-icon-close-notification" size="small" type="danger" @click="volume"
        >静音</el-button
      >
      <el-button class="btn3" icon="el-icon-circle-plus-outline" size="small" type="primary" @click="add"
        >加大音</el-button
      >
      <el-button class="btn4" icon="el-icon-remove-outline" size="small" type="primary" @click="reduce"
        >减小音</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "SJperss",
  data() {
    return {
      widths: 5,
      slewidths: 150,
    };
  },
  computed: {
    moreb() {
      switch (this.widths) {
        case 5:
          return 1;
          break;
        case 10:
          return 2;
          break;
        case 15:
          return 3;
          break;
        case 20:
          return 4;
          break;
        case 25:
          return 5;
          break;
        case 30:
          return 6;
          break;
        case 35:
          return 7;
          break;
        case 40:
          return 8;
          break;
        case 45:
          return 9;
          break;
        case 50:
          return 10;
          break;
        case 55:
          return 11;
          break;
        case 60:
          return 12;
          break;
        case 65:
          return 13;
          break;
        case 70:
          return 14;
          break;
        case 75:
          return 15;
          break;
        case 80:
          return 16;
          break;
        case 85:
          return 17;
          break;
        case 90:
          return 18;
          break;
        case 95:
          return 19;
          break;
        case 100:
          return 20;
          break;
        case 105:
          return 21;
          break;
        case 110:
          return 22;
          break;
        case 115:
          return 23;
          break;
        case 120:
          return 24;
          break;
        case 125:
          return 25;
          break;
        case 130:
          return 26;
          break;
        case 135:
          return 27;
          break;
        case 140:
          return 28;
          break;
        case 145:
          return 29;
          break;
        case 150:
          return 30;
          break;

        default:
          break;
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    add() {
      this.widths += 5;
      if (this.widths > 150) {
        this.widths = 150;
      }
      this.$emit("add", this.moreb);
    },
    reduce() {
      console.log(this.widths);
      this.widths -= 5;
      if (this.widths < 0) {
        this.widths = 0;
      }
      this.$emit("reduce", this.moreb);
    },
    evacuate() {
      this.$emit("evacuate", 1);
    },
    volume() {
      this.$emit("volume", 3);
    },
  },
};
</script>

<style lang="scss" scoped>
.dice {
  height: 150px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
  border: 1px solid #ccc;

  p {
    font-size: 16px;
    color: #333;
    font-weight: 400;
  }
  .sleader {
    height: 10px;
    border-radius: 30px;
    position: relative;
    background: #ebeef5;
    margin: 0 auto;
    .postwrp {
      position: absolute;
      height: 10px;
      border-radius: 30px;
      top: 0;
      left: 0;
      display: inline-block;
      background: #1596ff;
    }
    .moreb {
      position: absolute;
      right: -20px;
      height: 10px;
      width: 20px;
      text-align: center;
      line-height: 10px;
      top: 0;
      color: #333;
    }
  }
  .div-btn {
    display: flex;
    padding: 0 10px 0 10px;
    justify-content: space-between;
    align-items: space-between;
    flex-wrap: wrap;
    .btn1 {
      background: #e78c09;
      border-radius: 15px;
    }
    .btn2 {
      background: #eb4443;
      border-radius: 15px;
    }
    .btn3 {
      background: #12cecc;
      border-radius: 15px;
    }
    .btn4 {
      background: #5664ed;
      border-radius: 15px;
    }
     .btn5 {
      background: #0A8CFF;
      border-radius: 15px;
    }
    .el-button {
      margin-bottom: 10px;
      margin-left: 0;
    }
  }
}
</style>
